<script setup lang='ts'>
import { h, defineComponent, onMounted, reactive } from 'vue'
import { NButton} from 'naive-ui'




// 表格
const columns = [
	{
		title: "编号",
		key: "ids",
		align: 'center',
		// 'font-weight':'bold',
		// weight:'bold'
	},
	{
		title: "桌号",
		key: "number",
		align: 'center'
	},
	{
		title: "桌位",
		key: "position",
		align: 'center'
	},
	{
		title: "桌型",
		key: "cut",
		align: 'center'
	},
	{
		title: "桌号状态",
		key: "state",
		align: 'center'
	},
	{
		title: "台桌启用状态",
		key: "status",
		align: 'center'
	},
	{
		title: "操作",
		key: "operate",
		align: 'center',
		render(row: any) {
			return [h(
				NButton,
				{
					ghost: true,
					strong: true,
					tertiary: true,
					type: 'primary',
					size: 'small',
					color: '#18a058',
					onClick: () => play(row)
				},
				{ default: () => '查看 ' }
			),
			h(
				NButton,
				{
					strong: true,
					tertiary: true,
					size: 'small',
					color: '#7764ca',
					ghost: true,
					onClick: () => play(row)
				},
				{ default: () => '编辑 ' }
			),
			h(
				NButton,
				{
					strong: true,
					tertiary: true,
					size: 'small',
					color: '#f00',
					ghost: true,
					onClick: () => play(row)
				},
				{ default: () => '删除' }
			),
			]
		}
	},
]

// 数据
const data = [
	{ ids: 1000001, number: 101, position: '大厅', cut: '4人', state: '使用', status: '图标', operate: 'sda' },
	{ ids: 1000001, number: 101, position: '大厅', cut: '4人', state: '使用', status: '图标', operate: 'sda' },
	{ ids: 1000001, number: 101, position: '大厅', cut: '4人', state: '空闲', status: '图标', operate: 'sda' },
]

</script>

<template>
	<!-- 桌台查询 -->
	<n-layout>
		<n-layout-header>
			<div class="box-nav">桌台设置</div>
		</n-layout-header>
		<n-layout has-sider class="content">
			<n-layout-content>
				<div class="flex"> <span>桌位:</span>
					<n-select class="select" v-model:value="value" placeholder="请选择" :options="options" />
				</div>
			</n-layout-content>
			<n-layout-content>
				<div class="flex">
					<span>桌型:</span>
					<n-select class="select" v-model:value="value" placeholder="请选择" :options="options" />
				</div>
			</n-layout-content>
			<n-layout-content>
				<div class="flex">
					<span>使用该状态:</span>
					<n-select style="width: 60%;" class="select" v-model:value="value" placeholder="请选择"
						:options="options" />
				</div>
			</n-layout-content>
			<n-button style="margin-right: 30px;" type="info">查询</n-button>
		</n-layout>
	</n-layout>

	<!-- 表格 -->
	<div class="sp-nav">
		<div class="number">商品数量：135件</div>
		<div>
			<n-space justify="end">
				<n-button type="primary" dashed>桌位管理</n-button>
				<n-button type="warning" dashed>桌型管理</n-button>
				<n-button type="info" dashed>新建 +</n-button>
			</n-space>
		</div>
	</div>
	<n-data-table class="table" :columns="columns" :data="data" :pagination="pagination" :single-line="false" />

</template>

<style scoped>
.table {
	text-align: center;
}

.flex {
	display: flex;
}

.flex span {
	display: inline-block;
	line-height: 34px;
}

.box-nav {
	width: 100%;
	height: 45px;
	background-color: #e9eff5;
	line-height: 45px;
	padding-left: 20px;
}

.select {
	margin-left: 16px;
	width: 70%;
}

.n-button {
	margin-right: 29px;
}

.content {
	height: 90px;
	padding-top: 30px;
	border: 1px solid #fafafc;
	padding-left: 20px;
}

.sp-nav {
	margin-top: 30px;
	height: 61px;
	padding-left: 24px;
	line-height: 61px;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	border-top: 2px solid #fafafc;
}

.number {
	/* padding-top: 5px; */
	color: #7764ca;
	font-weight: 600;
}
</style>